<template>
  <el-upload
    class="avatar-uploader"
    drag
    :action="''"
    :show-file-list="false"
    :accept="'image/jpeg,image/png,image/bmp,image/tiff'"
    :limint="1"
    :http-request="handleUpload"
  >
    <el-image fit="cover" v-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
export default {
    props: {
        imageUrl: {
            type: String,
            default: '',
        },
    },
  data() {
    return {
     // imageUrl: ""
    };
  },
  methods: {
    // beforeUpload(file) {
    //   // 判断上传的文件类型是否为图片   font-size: 28px;
      //   const isJPG = file.type === "image/jpeg" || file.type === "image/png";
    //   if (!isJPG) {
    //     this.$message.error("只能上传jpg/png文件");
    //   }
    //   return isJPG;
    // },
    // handleSuccess() {
    //   // 上传成功的处理
    //   this.$message.success("上传成功");
    // },
    // manualUpload() {
    //   // 手动触发上传
    //   this.$refs.upload.submit();
    // },
    handleUpload(data) {
      const reader = new FileReader();
      reader.onload = (e) => {
        // 将文件的预览 URL 存入 fileList 中
        this.imageUrl = e.target.result;
         const fileData = {
          url: e.target.result,
          base64: e.target.result.split(',')[1]
        };

        // 发送 updateFile 事件，并传递 fileData 给父组件
        this.$emit('updateFile', fileData);
      };
      reader.readAsDataURL(data.file);
    }
  }
};
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 165px;
  height: 250px;
  line-height: 250px;
  text-align: center;
}
.avatar {
  width: 165px;
  height: 250px;
  display: block;
}
/deep/ .el-upload-dragger {
  width:165px;
  height:250px;
}
</style>
